<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>应用列表</title>
    <style>
        table {
            border-collapse: collapse;  /* 为table设置这个属性 */
        }
        th,td {
            border: 1px solid #000;
        }
        .hide {
            display: none;
        }
        .c1 {
            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            background-color: black;
            opacity: 0.6;
            z-index: 9;
        }
        .app-model{
            width: 500px;
            height: 400px;
            background-color: white;
            position: fixed;
            left: 50%;
            top: 50%;
            margin-left: -250px;
            margin-top: -200px;
            z-index: 10;
            text-align: center;
        }
        .host-tag{
            display: inline-block;
            padding: 3px;
            border: 1px solid red;
            background-color: palegoldenrod;
        }
    </style>
</head>
<body>

<h1>应用列表</h1>

<div>
    <input id="add_app" type="button" value="添加">
</div>

<!-- 遮罩层开始 -->
<div class="c1 hide"></div>
<!-- 遮罩层结束 -->

<!-- 弹出框开始 -->
<div class="app-model hide">
    <form id="add_from" method="post" action="/cmdb/app">
        <div class="group">
            <label>
                <input id="app_name" type="text" placeholder="应用名称" name="app_name"/>
            </label>
        </div>

        <div class="group">
            <label>
                <select id="host_list" name="host_list" multiple>
                    {% for op in host_list %}
                        <option value="{{ op.nid }}">{{ op.hostname }}</option>
                    {% endfor %}
                </select>
            </label>
        </div>

        <input type="submit" value="提交" />
        <input id="add_submit_ajax" type="button" value="Ajax提交" />
        <input id="cancel" type="button" value="取消" />
        <span id="error_msg" style="color: red"></span>

    </form>

</div>
<!-- 弹出框结束 -->

<table>
    <thead>
    <tr>
        <td>应用名称</td>
        <td>应用主机列表</td>
        <td>操作</td>
    </tr>
    </thead>
    <tbody>
    {% for app in app_list %}
        <tr>
            <td>{{ app.name }}</td>
            <td>
                {% for host in app.r.all %}
                    <span class="host-tag" hid="{{ host.nid }}">{{ host.hostname }}</span>
                {% endfor %}
            </td>
            <td>
                <a class="edit">编辑</a>
            </td>
        </tr>
    {% endfor %}
    </tbody>
</table>


<script src="https://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script>
    $(function (){
        $('#add_app').click(function (){
            $('.c1, .app-model').removeClass('hide');
        });

        $('#add_submit_ajax').click(function (){
            $.ajax({
                url: '/cmdb/add_submit_ajax',
                data: $('#add_from').serialize(),
                type: 'POST',
                dataType: 'JSON',
                traditional: true,
                success: function (data){
                    //alert(data);
                    if (data.status){
                        location.reload();
                    }else {
                        $('#error_msg').text(data.error);
                    }
                },
                error: function (){

                },

            })
        })

        $('.edit').click(function (){

        })

    })
</script>
</body>
</html>